<template>
  <el-dialog
    v-model="dialogVisible"
    title="查看原始评论"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
  >
    <div v-if="comment" class="original-comment-content">
      <!-- 评论基本信息 -->
      <div class="comment-info">
        <div class="info-row">
          <span class="label">评论ID:</span>
          <span class="value">{{ comment.id }}</span>
        </div>
        <div class="info-row">
          <span class="label">用户:</span>
          <span class="value"
            >{{ comment.userName }} (ID: {{ comment.userId }})</span
          >
        </div>
        <div class="info-row">
          <span class="label">发布时间:</span>
          <span class="value">{{ comment.createTime }}</span>
        </div>
        <div class="info-row">
          <span class="label">IP地址:</span>
          <span class="value">{{ comment.ipAddress || "未记录" }}</span>
        </div>
        <div class="info-row">
          <span class="label">状态:</span>
          <el-tag :type="getStatusTagType(comment.status)">
            {{ getStatusText(comment.status) }}
          </el-tag>
        </div>
        <div v-if="comment.isSensitive" class="info-row">
          <span class="label">敏感类型:</span>
          <el-tag type="danger">{{
            comment.sensitiveTypeText || "敏感内容"
          }}</el-tag>
        </div>
      </div>

      <!-- 评论内容对比 -->
      <div class="content-comparison">
        <div class="content-section">
          <h4>当前显示内容</h4>
          <div class="content-box current-content">
            {{ comment.content }}
          </div>
        </div>

        <div
          v-if="
            comment.originalContent &&
            comment.originalContent !== comment.content
          "
          class="content-section"
        >
          <h4>原始内容</h4>
          <div class="content-box original-content">
            {{ comment.originalContent }}
          </div>
        </div>

        <div
          v-if="
            !comment.originalContent ||
            comment.originalContent === comment.content
          "
          class="content-section"
        >
          <el-alert
            title="此评论未经过敏感词过滤处理"
            type="info"
            :closable="false"
            show-icon
          />
        </div>
      </div>

      <!-- 敏感词信息 -->
      <div
        v-if="comment.isSensitive && comment.sensitiveWords"
        class="sensitive-info"
      >
        <h4>敏感词信息</h4>
        <div class="sensitive-details">
          <div class="detail-item">
            <span class="label">敏感度评分:</span>
            <span class="value">{{ comment.sensitiveScore || 0 }}</span>
          </div>
          <div class="detail-item">
            <span class="label">检测到的敏感词:</span>
            <div class="sensitive-words">
              <el-tag
                v-for="word in parseSensitiveWords(comment.sensitiveWords)"
                :key="word"
                type="danger"
                size="small"
                class="word-tag"
              >
                {{ word }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button
          type="primary"
          :disabled="!hasOriginalContent"
          @click="copyOriginalContent"
        >
          复制原始内容
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed, watch } from "vue";
import { ElMessage } from "element-plus";
import {
  type CommentInfo,
  CommentManagementUtils
} from "@/api/comment-management";

interface Props {
  visible: boolean;
  comment: CommentInfo | null;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  comment: null
});

const emit = defineEmits<{
  "update:visible": [value: boolean];
}>();

const dialogVisible = ref(false);

// 监听 visible 属性变化
watch(
  () => props.visible,
  newVal => {
    dialogVisible.value = newVal;
  },
  { immediate: true }
);

// 监听对话框显示状态变化
watch(dialogVisible, newVal => {
  emit("update:visible", newVal);
});

// 计算属性
const hasOriginalContent = computed(() => {
  return (
    props.comment?.originalContent &&
    props.comment.originalContent !== props.comment.content
  );
});

// 方法
const getStatusText = (status: number) => {
  return CommentManagementUtils.getStatusText(status);
};

const getStatusTagType = (status: number) => {
  return CommentManagementUtils.getStatusTagType(status);
};

const parseSensitiveWords = (sensitiveWords: string) => {
  try {
    if (typeof sensitiveWords === "string") {
      // 如果是逗号分隔的字符串
      if (sensitiveWords.includes(",")) {
        return sensitiveWords
          .split(",")
          .map(word => word.trim())
          .filter(word => word);
      }
      // 如果是JSON字符串
      if (sensitiveWords.startsWith("[") || sensitiveWords.startsWith("{")) {
        const parsed = JSON.parse(sensitiveWords);
        if (Array.isArray(parsed)) {
          return parsed;
        }
      }
      // 单个敏感词
      return [sensitiveWords];
    }
    return [];
  } catch (error) {
    console.error("解析敏感词失败:", error);
    return [sensitiveWords];
  }
};

const copyOriginalContent = async () => {
  if (!props.comment?.originalContent) {
    ElMessage.warning("没有原始内容可复制");
    return;
  }

  try {
    await navigator.clipboard.writeText(props.comment.originalContent);
    ElMessage.success("原始内容已复制到剪贴板");
  } catch (error) {
    console.error("复制失败:", error);
    ElMessage.error("复制失败，请手动复制");
  }
};

const handleClose = () => {
  dialogVisible.value = false;
};
</script>

<style scoped>
.original-comment-content {
  max-height: 600px;
  overflow-y: auto;
}

.comment-info {
  padding: 16px;
  margin-bottom: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.info-row:last-child {
  margin-bottom: 0;
}

.label {
  flex-shrink: 0;
  width: 100px;
  font-weight: 600;
  color: #606266;
}

.value {
  color: #303133;
}

.content-comparison {
  margin-bottom: 20px;
}

.content-section {
  margin-bottom: 16px;
}

.content-section h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: #303133;
}

.content-box {
  padding: 12px;
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
  border-radius: 6px;
}

.current-content {
  background-color: #e8f4fd;
  border: 1px solid #b3d8ff;
}

.original-content {
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
}

.sensitive-info {
  padding: 16px;
  background-color: #fef0f0;
  border: 1px solid #fbc4c4;
  border-radius: 8px;
}

.sensitive-info h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #f56c6c;
}

.sensitive-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item {
  display: flex;
  align-items: flex-start;
}

.detail-item .label {
  flex-shrink: 0;
  width: 120px;
}

.sensitive-words {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.word-tag {
  margin: 0;
}

.dialog-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
</style>
